{% extends "UserBundle::layout.html.twig" %}

{% block header %}
    {{ parent() }}
	{% include "UserBundle:Registration:registerPage.html.twig" %}
{% endblock %}

{% block classPage %}page wide-style{% endblock %}


{% block body %}
<section>
	<style>
			#main{padding: 0px;}
	</style>
	<div id="call-to-actions" class="silver-bg">
		<div class="row map-bg">
			<div class="twelve columns">
				<h1 class="section-title">Todo comienza con una <span class="pink-text">Amistad</span></h1>
				<p class="lead">
					Por fin nos has encontrado. Más de <span class="pink-text">{{data.total}}</span> en todo el mundo ya compartían la misma experiencia y utiliza nuestro sistema. <strong class="black-text">Con nosotros hoy es más fácil!</strong>
				</p>
        
			</div><!--end twelve-->

			<!--Status Icons-->
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_01.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Usuarios Reales">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.total}}</li>
					<li class="subtitle">Usuarios Reales</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_02.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Usuarios online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{'%.0f'|format(data.total/4)}}</li>
					<li class="subtitle">Usuarios online</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_03.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Mujeres online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.facets.true}}</li>
					<li class="subtitle">Mujeres online</li>
				</ul>
			</div>
        
			<div class="status three columns mobile-one">
				<div class="icon" data-animation="pulse">
					{% image '@AmistateBundle/Resources/public/images/icons/steps/status_04.png' %}
						<img src="{{ asset_url }}" width="213" height="149" alt="Hombres online">
					{% endimage %}
				</div>
				<ul class="block-grid">
					<li class="title">{{data.facets.false}}</li>
					<li class="subtitle">Hombres online</li>
				</ul>
			</div>
      
    </div><!--end row map-bg-->
  </div><!--end call-to-actions-->
</section>



<section>
	<div id="feature-text" class="text-center">
		<div class="row">
			<div class="twelve columns">
				<h2><span class="no-bg">¿Por qué optar por <span class="pink-text">convertirse en miembro</span>?</span></h2>
				<p class="lead">Aquí tienes algunas razones y características. Envío de mensajes a otros usuarios, busquedas inteligentes en base a tu perfil, acceso a contenido exclusivo, y mucho más.</p>
			</div><!--end twelve-->
			
			<ul class="no-bullet">
				<li class="four columns">
					<div class="circle">
						{% image '@AmistateBundle/Resources/public/images/small_thumb_01.png' %}
							<img src="{{ asset_url }}" alt="100% Gratis">
						{% endimage %}
					</div>	
					<h4>100% Gratis</h4>
					<p>Usted puede registrarse y crear su perfil de forma gratuita!</p>
				</li>
				
				<li class="four columns">
					<div class="circle">
						{% image '@AmistateBundle/Resources/public/images/small_thumb_02.png' %}
							<img src="{{ asset_url }}" alt="100% Gratis">
						{% endimage %}
					</div>	
					<h4>Compatibilidad</h4>
					<p>Invite a amigos para ayudar a encontrar su pareja ideal</p>
				</li>
				
				<li class="four columns">
					<div class="circle">
						{% image '@AmistateBundle/Resources/public/images/small_thumb_03.png' %}
							<img src="{{ asset_url }}" alt="100% Gratis">
						{% endimage %}
					</div>	
					<h4>Compartir experiencias</h4>
					<p>Compartí tus datos así otras personas pueden encontrarte</p>
				</li>
				
			</ul>
		</div><!--end row-->
	</div><!--end feature-text-->
</section>

{% endblock %}